<template>
    <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form class="-mb-15px" :model="formData" ref="queryFormRef" :inline="true" label-width="68px">
      <el-form-item v-for="(item, index) in formJson" :key="index" :prop="item.columnName" :label="item.columnComment" class="formWirth">
        <el-input class="w-100" v-if="item.schemaType === 'input' || item.schemaType === 'number' || item.schemaType === 'textarea' || item.schemaType === 'rich-editor'" v-model="item.modelValue" placeholder="请输入"/>
        <el-select  class="w-100" v-model="item.modelValue" v-if="item.schemaType === 'radio' || item.schemaType === 'select'">
          <el-option v-for="(val, valIndex) in item.optionItems" :key="valIndex" :label="val.label" :value="val.value"/>
        </el-select>
        <el-select class="w-100" v-model="item.modelValue" v-if="item.schemaType === 'checkbox'" multiple >
          <el-option v-for="(val, valIndex) in item.optionItems" :key="valIndex" :label="val.label" :value="val.value"/>
        </el-select>
        <el-time-picker style="width: 100%;" v-if="item.schemaType === 'time'" v-model="item.modelValue" placeholder="请选择时间" />
        <el-time-picker
          v-if="item.schemaType === 'time-range'"
          v-model="item.modelValue" 
          is-range
          class="w-100"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <el-date-picker
         v-if="item.schemaType === 'date'"
         style="width: 100%;"
          v-model="item.modelValue" 
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
          />
          <el-date-picker
          class="w-100"
          v-if="item.schemaType === 'date-range'"
            v-model="item.modelValue" 
            type="daterange"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="开始日期"
          />
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
v-model="formData.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
          start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
        <el-button type="primary" plain @click="openFormPage('create')" v-hasPermi="['infra:form-construct:create']">
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <slot name="buttonSlot"></slot>
      </el-form-item>
    </el-form>
  </ContentWrap>

</template>
<script setup lang="ts">
const emit = defineEmits(['openFormPage', 'resetQuery', 'handleQuery'])
const formJson = ref()
const props = defineProps({
  searchParams: {
    type: Object,
    default: () => {}
  },
  formRenderData: {
    type: Object,
    default: () => {}
  }
})
const formCode = ref('')
const formData: any = reactive({
  createTime: undefined,
  searchFieldVos: []
})

/** 表单构建 表单 */
defineOptions({ name: 'FormSearch' })

const openFormPage = (type) => {
  emit('openFormPage', type)
}
const handleQuery = () => {
  var filterData: any = []
  formJson.value.map((item: any) => { 
    if (item.modelValue && item.modelValue.length > 0) {
      filterData.push({
        filed: item.columnName,
        value: item.modelValue
      })
    }
  })
  formData.searchFieldVos = filterData
  emit('handleQuery', formData)
}
const queryFormRef: any = ref(null)
/** 重置表单 */
const resetQuery = () => {
  formData.searchFieldVos = []
  formData.createTime = undefined
  formJson.value.map((item: any) => {
    item.modelValue = undefined
  })
  emit('resetQuery', {})
}

onMounted(() => {
  formCode.value = props.searchParams.formCode
})

watch(() => props.formRenderData, (newData) => {
  var filterArr: any = []
  newData.map((item: any) => {
    item['modelValue'] = undefined
    if (item.schemaType != 'switch' && item.schemaType != 'rate'  && item.schemaType != 'picture-upload' && item.schemaType != 'file-upload') {
      filterArr.push(item)
    }
  }) 
  formJson.value = filterArr
  // console.log(formJson.value, 333)
})
</script>
<style scoped lang="scss">
  .formWirth {
    width: 20%;
  }

  .w-100 {
    width: 100% !important;
  }

</style>
